<template>
	<view class="home">
		<view class="form">
			<u-form :model="data.form" label-width="auto" :disabled="true">
				<u-form-item label="绑定车辆" :borderBottom="true">
					<u-text align="right" suffix-icon="arrow-right" :color="data.form.car_text!='请选择'?'#0C9BF4':'#c0c4cc'"
						:text="data.form.car_text" @click="changeCar"></u-text>
				</u-form-item>
				<u-form-item label="保养时间" :borderBottom="true" v-if="props.type == 2">
					<u-text align="right" suffix-icon="arrow-right" :color="data.form.baoyang_time_text !=''?'#333':'#c0c4cc'"
						:text="data.form.baoyang_time_text" @click="changeTime"></u-text>
				</u-form-item>
				<u-form-item label="下次保养时间" :borderBottom="true" v-if="props.type == 2">
					<u-text align="right" suffix-icon="arrow-right" :color="data.form.baoyang_time_text !=''?'#333':'#c0c4cc'"
						:text="data.form.next_baoyang_time_text" @click="changeNextTime"></u-text>
				</u-form-item>
				<u-form-item label="公里数" :borderBottom="true" v-if="props.type == 1">
					<u-input border="none" v-model="data.form.baoyang_kilometer" placeholder="请输入" input-align="right"></u-input>
				</u-form-item>
				<u-form-item label="下次公里数" :borderBottom="true" v-if="props.type == 1">
					<u-input border="none" v-model="data.form.next_kilometer" placeholder="请输入"
						input-align="right"></u-input>
				</u-form-item>
				<u-form-item label="保养地点" :borderBottom="true">
					<u-input border="none" v-model="data.form.baoyang_address" placeholder="请输入" input-align="right"></u-input>
					<!-- <u-text align="right" suffix-icon="arrow-right" :color="data.form.baoyang_address!=''?'#333':'#c0c4cc'"
						:text="data.form.baoyang_address" @click="changeCity"></u-text> -->
				</u-form-item>
				<u-form-item label="保养金额" :borderBottom="true">
					<u-input border="none" v-model="data.form.baoyang_money" placeholder="请输入" input-align="right"></u-input>
				</u-form-item>
				<u-form-item label="备注" label-position="top">
					<u-textarea border="none" v-model="data.form.desc" placeholder="请输入"></u-textarea>
				</u-form-item>
			</u-form>
		</view>
		<view class="u-p-l-60 u-p-r-60">
			<u-button type="primary" customStyle="margin:130rpx auto 20rpx;height:100rpx;fontSize:36rpx;borderRadius:12rpx"
				@click="_addBaoyang">确认</u-button>
		</view>
		<up-datetime-picker :show="data.timeShow" v-model="data.defaultTime" mode="date" :formatter="formatter"
			@cancel="changeTime" @confirm="confirmTime"></up-datetime-picker>
		<up-datetime-picker :show="data.nextTimeShow" v-model="data.defaultTime" mode="date" :formatter="formatter"
			@cancel="changeNextTime" @confirm="confirmNextTime"></up-datetime-picker>
		<region-item :regionShow="data.regionShow" @update:regionShow="data.regionShow = $event"
			@confirmRegion="confirmRegion"> </region-item>
		<up-picker :show="data.carShow" closeOnClickOverlay :columns="data.car" @cancel="changeCar" @confirm="confirmCar"
			keyName="number"></up-picker>
	</view>
</template>

<script setup>
	import { onMounted, ref } from "vue";
	import { timeFormat } from 'uview-plus';
	import { addAccountLog, addBaoyang, carList, logInfo } from "../../config/api";
	import { getCache, prefixURL, _upload } from "../../util/util";
	const props = defineProps({
		id: {
			type: [String, Number],
			default: ''
		},
		type: {
			type: [String, Number],
			default: ''
		},
	})
	const data = ref({
		form: {
			car_text: '请选择'
		},
		defaultTime: Number(new Date()),
		timeShow: false,
		nextTimeShow: false,
		regionShow: false,
		car: [],
		carShow: false,
		userInfo: getCache('userInfo')
	});
	onMounted(() => {
		_carList()
		if (data.value.userInfo.group_id == 2) {
			data.value.form.car_text = data.value.userInfo.car_number
		}
	})
	// 确认选择
	const confirmCar = (row) => {
		console.log(row)
		data.value.form.car_text = row.value[0].number
		data.value.form.car_id = row.value[0].id
		data.value.carShow = false
	}
	// 选择车辆
	const changeCar = () => {
		if (data.value.userInfo.group_id == 2) return
		data.value.carShow = !data.value.carShow
		console.log(data.value.car)
		// uni.navigateTo({
		// 	url:'/pages/index/changeCar'
		// })
	}
	// 车辆列表
	const _carList = () => {
		carList().then(res => {
			console.log(res)
			data.value.car = [res.data]
		})
	}
	const _addBaoyang = () => {
		addBaoyang({ ...data.value.form, type: props.type, maintenance_id: props.id }).then(res => {
			uni.$u.toast(res.msg)
			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		})
	}
	const confirmRegion = (row) => {
		data.value.form.baoyang_address = row.city_text
		data.value.regionShow = false
	}
	const changeCity = (row) => {
		data.value.regionShow = true
	}
	const confirmNextTime = (row) => {
		data.value.form.next_time = parseInt(row.value / 1000)
		data.value.form.next_baoyang_time_text = uni.$u.timeFormat(row.value, 'yyyy-mm-dd')
		data.value.nextTimeShow = false
	}
	// 时间确认选择
	const confirmTime = (row) => {
		data.value.form.baoyang_time = parseInt(row.value / 1000)
		data.value.form.baoyang_time_text = uni.$u.timeFormat(row.value, 'yyyy-mm-dd')
		data.value.timeShow = false
	}
	const changeNextTime = () => {
		data.value.nextTimeShow = !data.value.nextTimeShow
	}
	const changeTime = () => {
		data.value.timeShow = !data.value.timeShow
	}

	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`;
		}
		if (type === 'month') {
			return `${value}月`;
		}
		if (type === 'day') {
			return `${value}日`;
		}
		return value;
	}
</script>

<style scoped lang="scss">
	.home {
		min-height: 100vh;
		background: #fafafa;
		padding: 20rpx 0;
	}

	.form {
		padding: 0 24rpx;
		background: #fff;
	}

	::v-deep .u-form-item__body {
		padding: 30rpx 0;
	}

	::v-deep .u-radio-group--row {
		justify-content: flex-end;
	}
</style>